<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
    <style>
        span {
            width: 80px;
            height: 80px;
            /* background-color: red; */
            display: block;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            color: #fff;
            font-weight: bold;
            position: absolute;
            top: 0;
            left: 0;
        }

        body {
            width: 100%;
            height: 800px;
        }
    </style>
</head>

<body>
    <div>
        点击得分：
        <b>0</b>
    </div>
    <div>
        <button id='start'>开始游戏</button>
        <button id='end'>结束游戏</button>
    </div>
</body>

</html>
<script src="./运动函数.js"></script>
<script src="./烟花.js"></script>

<script>

    var fen = 0;//分数
    var timer;//时间
    var span = document.createElement('span');// 创建span 标签
    var body = document.querySelector('body');// 获取到body的标签
    var start = document.querySelector("#start");// 开始游戏
    var end = document.querySelector("#end");// 结束游戏
    function createSpan() {//生成气球
        document.body.appendChild(span);//在页面中插入span 坐标
        var x = Math.random() * (document.documentElement.clientWidth + 100 - span.offsetWidth - 100);//获取在页面横向随机坐标
        span.style.left = x - 10 + 'px';//设定位置
        span.style.background = getColor();//给气球随机颜色
        move1();//简单的运动函数
    }
    var fire = new Fire();// 获取
    start.onclick = () => {// 开始游戏
        clearInterval(timer);//停止移动
        if(span.length>'2'){
            document.body.removeChild(span);
        }
       
        // span = document.createElement('span');
            createSpan()
            fire.span = document.querySelector("span")
    }
    end.onclick = () => {//结束游戏
        document.querySelector('b').innerText = 0;//分数清零
        document.body.removeChild(span);// 删除span 的标签
        clearInterval(timer);// 解除定时器
    }
    // var fire = new Fire();
    // 构造函数提前实例化获得span的标签坐标 
    span.onclick = function () {/*点击事件*/
        document.body.removeChild(span);//删除页面中的span
        clearInterval(timer);//停止移动
        createSpan();// 重新生成span 的标签
        fen += 100;// 添加分数
        document.querySelector('b').innerText = fen;// 把分数添加到页面
        fire.init();// 烟花实例化

    }


    function move1() {/*运动函数向下降落事件*/
        var num = 0;
        timer = setInterval(function () {
            num += 2;//每次移动的距离
            if (num >= document.documentElement.clientHeight - span.clientHeight - 10) {//判断到底部距离时消除气球
                document.body.removeChild(span);// 删除span 的标签
                clearInterval(timer);// 解除定时器
                createSpan();// 生成新的气球
            }
            span.style.top = num + 'px';//设置顶部的距离
        }, 8)
    }

// function Fire(){
//     this.box=document.querySelector("body")
// }


</script>